<template>
  <div>
    <!-- 去出租导航栏 -->
    <div>
      <van-nav-bar
        title="发布房源"
        left-arrow
        fixed
        @click-left="onClickLeft"
      />
    </div>
    <div class="house">
      <div class="houseme">房源信息</div>
      <!-- 上传房源信息 -->
      <div>
        <!-- 小区名称 -->
        <van-cell-group>
          <van-field
            v-model="xiaoname"
            label="小区名称"
            placeholder="请输入小区名称"
            input-align="right"
            right-icon="arrow"
            @click="xiaonameFn"
          />
          <!-- 租金 -->
          <van-field
            v-model="xiaomoney"
            show-word-limit
            label="租金"
            placeholder="请输入租金/月"
            right-icon="discount"
          />
          <!-- 建筑面积 -->
          <van-field
            v-model="xiaommm"
            show-word-limit
            label="建筑面积"
            placeholder="请输入建筑面积"
            right-icon="discount"
          />
        </van-cell-group>
        <!-- 户型 -->
        <van-field
          readonly
          clickable
          :value="value"
          label="户型"
          placeholder="选择城市"
          input-align="right"
          right-icon="arrow"
          @click="showPicker = true"
        />
        <van-popup v-model="showPicker" round position="bottom">
          <van-picker
            show-toolbar
            :columns="roomType"
            value-key="label"
            @cancel="showPicker = false"
            @confirm="onConfirm"
          />
        </van-popup>
        <!-- 所在楼层 -->
        <van-field
          readonly
          clickable
          :value="value2"
          label="所在楼层"
          placeholder="选择城市"
          input-align="right"
          right-icon="arrow"
          @click="showPicker2 = true"
        />
        <van-popup v-model="showPicker2" round position="bottom">
          <van-picker
            show-toolbar
            value-key="label"
            :columns="floor"
            @cancel="showPicker = false"
            @confirm="onConfirm2"
          />
        </van-popup>
        <!-- 朝向 -->
        <van-field
          readonly
          clickable
          :value="value3"
          label="朝向"
          placeholder="选择城市"
          input-align="right"
          right-icon="arrow"
          @click="showPicker3 = true"
        />
        <van-popup v-model="showPicker3" round position="bottom">
          <van-picker
            show-toolbar
            :columns="oriented"
             value-key="label"
            @cancel="showPicker = false"
            @confirm="onConfirm3"
          />
        </van-popup>
      </div>
      <div class="houseme1">房屋标题</div>
      <div>
        <van-field
          v-model="housename"
          placeholder="请输入标题（例如：整租 小区名 2室 5000元）"
        />
      </div>
      <div class="houseme1">房屋图像</div>
      <van-uploader v-model="fileList" multiple :max-count="6" :after-read="afterRead"/>
      <!-- 房屋配置 -->
      <div>
        <div class="houseme1">房屋配置</div>
        <!-- includes方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。 -->
        <div :class="['housestyle',selectOpions.includes(value.name)?'active':'']"  >
          <van-grid :column-num="5" >
            <van-grid-item
            :class="selectOpions.includes(value.name)?'active':''"
            v-for="(value, index) in iconList"
             :key="index"
              :icon="value.icon"
              :text="value.name"
              @click="housestyleFn(value)"
            />
          </van-grid>
        </div>
      </div>
    </div>
    <div class="ggg"></div>
     <div class="housay">
        <div class="houseme2">房屋描述</div>
        <van-field
          v-model="message"
          rows="5"
          autosize
          label="留言"
          type="textarea"
          maxlength="50"
          placeholder="请输入留言"
          show-word-limit
        />
      </div>
      <div class="bb"></div>
    <div class="bottom">
      <van-button class="but1" size="small">取消</van-button>
      <van-button class="but2" size="small" type="danger" @click="yesFn()">确定</van-button>
    </div>
  </div>
</template>

<script>
import { houseImgAPI, paramsAPI, userhouseAPI } from '@/api'
import { Toast } from 'vant'
export default {
  data () {
    return {
      xiaoname: '',
      xiaomoney: '',
      xiaommm: '',
      // 发布房屋的条件
      sendHouseInfo: {
        title: '', // 小区名称
        price: '', // 租金
        size: '', // 建筑面积
        roomType: '', // 户型
        floor: '', // 楼层
        oriented: '', // 朝向
        housename: '', // 房屋标题
        houseImg: '', // 房屋图像
        supporting: '', // 选中的配置
        community: '', // 小区名称码
        description: '' // 房屋描述
      },
      value: '', // 选择弹出层的val值
      value2: '',
      value3: '',
      message: '', // 房屋描述
      housename: '', // 房屋标题
      showPicker: false, // 弹出层
      showPicker2: false,
      showPicker3: false,
      fileList: [], // 已经上传的图片列表
      selectOpions: [], // 选中的配置
      findList: JSON.parse(localStorage.getItem('findList')), // 存放筛选条件
      houseStyle: [], // 发布准备工作
      roomType: [], // 户型
      floor: [], // 楼层
      oriented: [], // 朝向
      // 图标
      iconList: [
        { icon: 'balance-list-o', name: '衣柜', value: 'SB13fb1c01-417b-5124' },
        { icon: 'shop-o', name: '洗衣机', value: 'SBda30d5f8-55d5-56c0' },
        { icon: 'desktop-o', name: '空调', value: 'SB256d93cd-84f5-e1fa' },
        { icon: 'fire-o', name: '天然气', value: 'SBfcae66b5-0bb9-1c43' },
        { icon: 'hotel-o', name: '冰箱', value: 'SB33e3135d-98ac-aeef' },
        { icon: 'chart-trending-o', name: '暖气', value: 'SBd564bedf-928e-b995' },
        { icon: 'tv-o', name: '电视', value: 'SBac4167b0-cf6a-6198' },
        { icon: 'bulb-o', name: '热水器', value: 'SB1f7f33a6-4d2c-ba54' },
        { icon: 'bar-chart-o', name: '宽带', value: 'SBbe2b2eb9-74cf-c43e' },
        { icon: 'diamond-o', name: '沙发', value: 'SB406f3750-28b8-b073' }
      ]
    }
  },
  created () {
    this.params()
    this.xiaoname = this.$route.query.name
    console.log(this.$route.query.name)
  },
  methods: {
    async params () {
      const res = await paramsAPI()
      console.log(res)
      // const list = res.data.body.supporting
      this.houseStyle = res.data.body
      this.roomType = res.data.body.roomType
      this.floor = res.data.body.floor
      this.oriented = res.data.body.oriented
      console.log(this.houseStyle)
    },
    onClickLeft () {
      // Toast('返回')
      this.$router.replace({
        path: '/layout/home'
      })
    },
    // 小区名称
    xiaonameFn () {
      this.$router.replace({
        path: '/rentname'
      })
    },
    // 户型
    onConfirm (item) {
      this.value = item.label
      console.log(item.value)
      this.sendHouseInfo.roomType = item.value
      // 点击弹出框消失
      this.showPicker = false
    },
    // 楼层
    onConfirm2 (item) {
      this.value2 = item.label
      console.log(item.value)
      this.sendHouseInfo.floor = item.value
      // 点击弹出框消失
      this.showPicker2 = false
    },
    // 朝向
    onConfirm3 (item) {
      this.value3 = item.label
      console.log(item.value)
      this.sendHouseInfo.oriented = item.value
      // 点击弹出框消失
      this.showPicker3 = false
    },
    // 房屋配置选择
    housestyleFn (value) {
      // console.log(value.name)
      // 筛选出要选择的索引
      const index = this.selectOpions.indexOf(value.name)
      // 判断数组里面是否有此项
      index === -1 ? this.selectOpions.push(value.name) : this.selectOpions.splice(index, 1)
      // 添加至发布房屋的选中配置里面
      this.sendHouseInfo.supporting = this.selectOpions.join('|')
      console.log(this.sendHouseInfo.supporting)
    },
    // 图像上传
    async afterRead (file) {
      if (this.fileList.length > 0) {
        const form = new FormData()
        // 遍历fileList
        this.fileList.forEach(item => form.append('file', item.file))
        const res = await houseImgAPI(form)
        this.sendHouseInfo.houseImg = res.data.body.join('|')
        console.log(res)
      }
    },
    // 确定上传信息
    async yesFn () {
      console.log('上传')
      this.sendHouseInfo.title = this.xiaoname // 小区名称
      this.sendHouseInfo.price = this.xiaomoney // 租金
      this.sendHouseInfo.size = this.xiaommm // 建筑面积
      this.sendHouseInfo.housename = this.housename // 房屋标题
      this.sendHouseInfo.description = this.message // 房屋描述
      // 调用接口

      try {
        await userhouseAPI(this.sendHouseInfo)
        Toast('房屋发布成功')
        this.$router.replace({
          path: '/layout/home'
        })
      } catch (error) {
        if (this.xiaoname === '' || this.xiaomoney === '') {
          Toast('请将信息填写完整')
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
 .active{
      color: #43b978;
     }
.house {
  margin: 40px 0 0;
  /* background-color: #f5f5f9; */
  padding: 0 10px;
}
.houseme {
  color: #21b97a;
  padding: 13px 4px 9px;
  background-color: #fff;
  box-sizing: border-box;
  font-size: 14px;
}
.houseme1{
  padding: 13px 4px 9px;
  background-color: #fff;
  box-sizing: border-box;
  font-size: 14px;
}
.houseme2{
   padding: 13px 4px 9px;
  background-color: #fff;
  box-sizing: border-box;
  font-size: 14px;
}
/* 房屋描述 */
.housay{
  padding: 0 10px;
}
/* 内边距 */
.van-cell{
    padding: 0.23rem 0.11rem;
}
/* 房屋配饰 */
.van-grid-item__content {
  padding: 7px;
}
/* 隔离桩 */
.ggg{
  height: 20px;
  background-color: #f6f5f6;
}
/* 底边按钮 */
.bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  height: 45px;
  z-index: 1;
  color: #fff;
  font-size: 15px;
  background-color: #fff;
}
.van-button--small {
  width: 5rem;
  height: 1.25333rem;
  padding: 0px 0.21333rem;
  font-size: 0.42rem;
}
.van-button--danger {
  background-color: #4fc08d;
  border: 0.02667rem solid #4fc08d;
}
.bb{
  height: 30px;
  background-color: #f6f5f6;
  margin-bottom: 45px;
}
</style>
